早期網頁大多都只有HTML骨架,
多數都是白底黑字、沒有美美的編排,文字特效blink一閃一閃的,
加上一些表格或表單,就能傳遞所有想要的資訊,就像現在的實體書本一樣,
頂多加給張照片,或者配個黃黃或黑黑的背景底色,但現在使用者都太挑食,網頁寫的醜就沒人想看了,動不動就想按左上或右上角的叉叉
以前學的時候還不知道,
以為在HTML中,每個tag的意義是一樣的,都只是為了網頁排版用而設計不一樣的外框或者外型,
只知道<h1>
就很大的字、數字越往<h6>
就越小 (蠻納悶為啥數字越大反而字體越小...我一開始都記不起來)
而<p>
就是整整齊齊會多佔一點空間的字,<div>
就普普通通中規中矩的字。
但徹底了解後,才知道每個標籤其實都有各自的語意,盡量不要亂使用。
搜索引擎是個大架構、有規模的爬蟲系統,
會依照這個網頁寫的內容及資訊,抓出網頁寫的標題、內文、文字段落敘述、圖片等等。
舉個較極端的例子,
即使改變樣式讓<h1>
的文字大小、字型、顏色都與<div>
一模一樣,
呈現出來的畫面雖然一樣,使用者看到的感受度也都相同,
肉眼來看是這樣,但對搜尋引擎來說卻不是這麼回事。
搜索引擎會認為這個網頁最重要的資訊(文章標題)是<h1>
,
而文字段落描述是<p>
,抓到<img>
知道這是張圖片,看到<a>
知道這是連結等等。
搜索引擎會去分辨這些事情,將搜索到的網站標題關鍵字下去做分類。
為節省版面空間,
往後程式碼的部分都是放在Body內部的東西
<p>段落</p>
<p>段落</p>
<div>DIV</div>
<div>DIV</div>
上方即為以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
</head>
<body>
<p>段落</p>
<p>段落</p>
<div>DIV</div>
<div>DIV</div>
</body>
</html>
數字越小,字體越大。
一個網頁裡面盡量只能有一個<h1>
,代表整篇帖子的主題。
如果一篇文章下了兩個大標題,那會是有點詭異的事。
<h1>網頁的大標題</h1>
<h2>網頁的副標題</h2>
<h3>網頁的中標題</h3>
<h4>網頁的小標題</h4>
<h5>網頁的小小標題</h5>
<h6>網頁的最小標題</h6>
<p>
段落(paragraph)預設的話會佔據段落的上下方一些空間
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et, mollitia!</p>
<a>
錨點掛勾(anchor)<a href="https://ithelp.ithome.com.tw/users/20125192/ironman/4909" target="_blank">連結</a>
href
連結網址(hypertext reference),可為相對路徑或絕對路徑(其他網站的網址連結)target
沒填時預設為_self
以目前頁面開啟連結,而_blank
為另啟新視窗方式點開連結另外<a>
可以製作追蹤id
的效果,會跳轉回對應的id
元素去,
這也是在網頁中class
能重複、id
卻不能重複的理由,
如果id重複,瀏覽器可能只會永遠跳到第一個id去。
<h1 id="title">我是標題</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>內容內容內容內容內容</p>
<a href="#title">點我回到標題</a>
<h1 id="title">我是標題</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Google_logo_%282013-2015%29.svg/1024px-Google_logo_%282013-2015%29.svg.png" alt="Google的Logo">
src
圖片連結網址(source),可為相對路徑或絕對路徑(其他網站的圖片網址)alt
圖片的文字敘述(alternate text),圖片失效時會顯示文字,以及讓讀稿機將圖片轉成文字讀出助於盲人理解建議有主題相關聯性的東西就用表單來放來,而非多個div
<ul>
無順序(unordered list) 前面是一個點<ol>
有順序(ordered list) 有編號<li>
項目實體(list),通常會被<ul>
或<ol>
給包住 <ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<table>
表格<tr>
表格列(table row),用以新增表格欄位(直行、往下新增)<th>
表頭列(table headers),用以表示第一列資料的表頭(橫列、往右新增)<td>
表單資料(table data),用以新增資料列(橫列、往右新增)<table>
<tr>
<th>標題1</th>
<th>標題2</th>
</tr>
<tr>
<td>內容1</td>
<td>內容2</td>
</tr>
<tr>
<td>內容1</td>
<td>內容2</td>
</tr>
</table>
Table表單沒有CSS時真的頗無聊、沒啥意思。
前面都是小case,
這邊開始是HTML的大魔王。
<form action="index.html" method="get">
<input type="text" name="mail" placeholder="請輸入信箱">
<input type="text" name="person" placeholder="請輸入名字">
<input type="submit" value="送出">
</form>
type
種類。常見帶入值有的:
text
單行文字框button
按鈕submit
提交表單時的送出按鈕radio
在相同name的選項中只能單選框checkbox
打勾複選框name
送出的參數名稱,名稱通常同id
。(瀏覽器透過name名稱來記住使用者常填寫的帳號密碼,如chrome就有自動填入帳號密碼功能)
value
內容值、預設填入的值。表單提交時是按value傳遞,而不是顯示的字
placeholder
佔位符,未填寫輸入時顯示的提示action
按下送出後,會跳轉到 action
寫的位置進行處理(通常是後端網頁),URL後面會串上?mail=123&person=333
method
預設是get
GET方法會將參數顯示在網址,純粹做查詢要資料、或者開發時用Debug相對方便。填入post
POST方法則不會顯示任何參數在網址列上,相對來說安全一些。<form action="index.html" method="get">
<label>性別</label>
<input type="radio" name="sex" value="male">男生
<input type="radio" name="sex" value="female">女生
<label>興趣</label>
<input type="checkbox" name="hobby" value="movie">電影
<input type="checkbox" name="hobby" value="music">音樂
<input type="checkbox" name="hobby" value="comic">漫畫
<input type="submit" value="送出">
</form>
當name
相同、使用checkbox
多選時,送出後URL會串上?sex=male&hobby=movie&hobby=music
一樣的Key重複地帶上多個值
<label>
標籤,通常搭配表單一起使用作為表單的提示字、說明標籤
<form action="index.html" method="get">
<label for="mail">電子郵件</label>
<input type="text" name="mail" id="mail" placeholder="請輸入信箱">
</form>
for
用途為點擊標籤後,會找相對應的id
來定位、聚焦select
清單、選單option
選項實體<form action="index.html">
<select name="year">
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
</select>
<input type="submit" value="送出">
</form>
送出後,URL會串上?year=1997
<form action="index.html" method="get">
<textarea name="content" cols="30" rows="10"></textarea>
<input type="submit" value="送出">
</form>
cols
顯示寬的字元數rows
顯示高的字元數OK,前面講了蠟麼多東西,現在剩下一點點了
<div>
本身不具任何意思、沒有語意,單純拿來排版用。
division意思是"分隔、分裂、除法"
區塊元素 會優先佔滿一整塊水平方向的區域,會換行。
<sapn>
本身不具任何意思,和div
一樣純粹點綴樣式用。
spans意思是"跨越、跨度"
行內元素 會優先擠在同一塊水平方向的區域,能不換行就不換行。
<div>Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
<span>Lorem ipsum dolor sit amet, consectetur.</span>
因為不具有任何語意,這兩者常被拿來當作容器(Container),適合拿來掛CSS。
不成雙成對的標籤,為了看起來對稱些,
有些人會選擇性的加上結尾封閉標籤< />
,但在HTML中有沒有寫是一樣的。
<br>
換行、斷行(break)<br />
也有人這樣寫
<hr>
水平線(horizontal rule)<hr />
也有人這樣寫
Lorem ipsum dolor sit amet. <br>
Lorem ipsum dolor sit amet. <br>
<hr>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, voluptatibus! <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, voluptatibus! <br>
單純講解HTML真的很無聊,
但熟悉過後再回來找純HTML用法也比較快,
擇日搭配上CSS才會有效果上的變化,會更有學習的動力。